<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/skin/ui/plugins/uploaderlib/fine-uploader-5.11.10/fine-uploader-new.css" rel="stylesheet">
        <script src="/skin/ui/plugins/uploaderlib/fine-uploader-5.11.10/fine-uploader.js"></script>
        <script type="text/template" id="qq-template-manual-trigger">
            <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
            <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="buttons">
            <div class="qq-upload-button-selector qq-upload-button">
            <div>选择文件...</div>
            </div>
            <button type="button" id="trigger-upload" class="btn btn-primary">
            <i class="icon-upload icon-white"></i> 上传
            </button>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
            <span>Processing dropped files...</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
            <li>
            <div class="qq-progress-bar-container-selector">
            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
            </div>
            <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
            <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
            <span class="qq-upload-file-selector qq-upload-file"></span>
            <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
            <span class="qq-upload-size-selector qq-upload-size"></span>
            <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
            <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
            <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
            <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
            <div class="qq-dialog-message-selector"></div>
            <div class="qq-dialog-buttons">
            <button type="button" class="qq-cancel-button-selector">Close</button>
            </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
            <div class="qq-dialog-message-selector"></div>
            <div class="qq-dialog-buttons">
            <button type="button" class="qq-cancel-button-selector">No</button>
            <button type="button" class="qq-ok-button-selector">Yes</button>
            </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
            <div class="qq-dialog-message-selector"></div>
            <input type="text">
            <div class="qq-dialog-buttons">
            <button type="button" class="qq-cancel-button-selector">Cancel</button>
            <button type="button" class="qq-ok-button-selector">Ok</button>
            </div>
            </dialog>
            </div>
        </script>

        <style type="text/css">
            #trigger-upload {
                color: white;
                background-color: #00ABC7;
                font-size: 12px;
                padding: 4px 10px;
                background-image: none;
            }

            #fine-uploader-manual-trigger .qq-upload-button {
                margin-right: 15px;
            }

            #fine-uploader-manual-trigger .buttons {
                /* width: 36%;*/
                width:450px;
            }

            #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
                /* width: 60%; */
                width: 480px;
            }
            /* hack 2016-12-15 by sochishun */
            body{margin:0;}
            .qq-upload-file {width:200px}
            .qq-thumbnail-selector {margin-right:0;}
            .qq-edit-filename-icon {margin-right:10px;}
            .qq-upload-file.qq-editable {margin-right:0}
            .qq-upload-list{max-height:200px;}
            .qq-uploader {min-height:200px; max-height:230px; padding:5px;}
            .qq-total-progress-bar{height:15px;}
            .qq-upload-button { font-size:12px; padding:5px 10px;}
            .qq-upload-list li {padding:5px;}
            img.qq-thumbnail-selector { width:64px; height:48px;}
        </style>

        <title>Fine Uploader Manual Upload Trigger Demo</title>
    </head>
    <body>
        <!-- Fine Uploader DOM Element
        ====================================================================== -->
        <div id="fine-uploader-manual-trigger"></div>
        <input type="hidden" id="action_url" value="{:U('kindeditor_upload')}" />
        <input type="hidden" id="callback" value="multi_uploader_cb" />
        <input type="hidden" id="name" value="pictures" />
        <input type="hidden" id="debug" value="Y" />
        <!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
             ====================================================================== -->
        <script>
            var debug = 'Y' == document.getElementById('debug').value; // the name of the textbox element
            var manualUploader = new qq.FineUploader({
                element: document.getElementById('fine-uploader-manual-trigger'),
                template: 'qq-template-manual-trigger',
                validation: {
                    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                    sizeLimit: 512000 // 500 kB = 500 * 1024 bytes
                },
                request: {
                    endpoint: document.getElementById('action_url').value
                },
                thumbnails: {
                    placeholders: {
                        waitingPath: '__SCRIPT__fine-uploader-5.11.10/placeholders/waiting-generic.png',
                        notAvailablePath: '__SCRIPT__fine-uploader-5.11.10/placeholders/not_available-generic.png'
                    }
                },
                autoUpload: false,
                debug: false,
                callbacks:
                        {
                            onSubmit: function (id, fileName) {
                                //console.log('onSubmit:' + id + '|' + fileName);
                            },
                            onUpload: function (id, fileName) {
                                //console.log('onUpload:' + id + '|' + fileName);
                            },
                            onComplete: function (id, fileName, responseJSON) {
                                var name = document.getElementById('name').value; // the name of the textbox element
                                var callback = document.getElementById('callback').value; // the callback function in parent window.
                                if (debug) {
                                    console.log('onComplete:' + id + '|' + fileName);
                                    console.log(responseJSON);
                                    console.log(callback + '::' + window.parent[callback]);
                                }

                                if (window.parent[callback]) {
                                    window.parent[callback](name, responseJSON.url);
                                }
                            },
                        }
            });

            qq(document.getElementById("trigger-upload")).attach("click", function () {
                manualUploader.uploadStoredFiles();
            });
        </script>
    </body>
</html>